<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>历史文章</title>
    <link rel="stylesheet" th:href="@{/semantic/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>

    </style>
</head>

<body style="background-color: #FAFAFA">

<div class="layui-container" style="width: auto">

    <div class="layui-row">

        <div class="layui-col-md10 layui-col-md-offset1">
            <!--        导航栏-->
            <div th:insert="component/user-header.html::header('历史文章')"></div>

            <!--            内容-->
            <div class="layui-row layui-col-space10" style="margin-top: 60px;font-size: 16px;">
                <div id="topics" class="ui large feed">
                    <!--                评论提示-->
                    <div th:if="${#request.getAttribute('topics').size() == 0}">
                        <div class="ui icon message">
                            <i class="green check icon"></i>
                            <div class="content">
                                <div class="header">提示</div>
                                <p>没有发布过文章……</p>
                            </div>
                        </div>
                    </div>

                    <div th:if="${#request.getAttribute('topics').size() != 0}" class="event" th:each="topic:${#request.getAttribute('topics')}"
                         th:value="${topic.id}" style="margin-bottom: 55px">

                        <div class="label">
                            <img th:src="${user.img}">
                        </div>

                        <div class="content">

                            <div class="summary">
                                <a class="user" th:href="@{/user/info/{id}(id=${user.id})}"
                                   th:text="${user.username}"></a>
                                <div class="date" th:text="${topic.time}"></div>
                            </div>

                            <div class="extra text"
                                 style="overflow: hidden;
                                     text-overflow: ellipsis;
                                     display: -webkit-box;
                                     -webkit-line-clamp: 3;/*想省略几行就写几*/
                                     -webkit-box-orient: vertical;">
                                <a th:href="@{/topic/{id}(id=${topic.id})}" th:text="${topic.content}"></a>
                            </div>

                            <div class="meta">
                                <a class="eye">
                                    <i class="eye icon"></i>
                                    <span th:text="${topic.view}"></span> Views
                                </a>
                                <a class="like">
                                    <i class="like icon"></i>
                                    <span th:text="${topic.start}"></span> Likes
                                </a>

                                <a th:if="${session.user != null && #request.getAttribute('user') != null && #request.getAttribute('user').id == session.user.id}"
                                   class="delete"
                                   th:value="${topic.id}"
                                   onclick="deleteF(this.getAttribute('value'))">
                                    <i class="red times icon"></i> Delete
                                </a>

                                <a th:if="${session.user != null && #request.getAttribute('user') != null && #request.getAttribute('user').id == session.user.id}" c
                                   lass="edit"
                                   th:value="${topic.id}"
                                   onclick="editF(this.getAttribute('value'))">
                                    <i class="yellow edit icon"></i> Edit
                                </a>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<div th:insert="index.html::pageTail"></div>

</body>

<script th:src="@{/js/jquery.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/semantic/semantic.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script th:src="@{/js/my.js}"></script>
<script type="application/javascript">

    var deleteF = function(topicId){
        layer.open({
            title: '提示'
            , content: '您确定要删除这个文章吗？'
            , yes: function (index, layero) {
                var requestData = {
                    id: topicId
                }
                console.log(topicId)
                axios.post('/topic/delete/id', requestData).then(res => {
                    if (res.data == '1'){
                        layer.open({
                            title: '提示',
                            content: '删除成功',
                            yes: function(index, layero){
                                location.reload()
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                            }
                        });
                    }

                })
                layer.close(index);
            }
        });
    }

    editF = function(topicId){
        layer.open({
            title: '提示'
            , content: '是否要编辑该文章？'
            , yes: function (index, layero) {
                location.href = '/topic/edit/' + topicId;
            }
        });
    }

</script>

</html>
